<template>
  <view>
    <!-- <view class="video-box">
      <video
        id="myVideo"
        class="video-container"
        :src="activeUrl"
        controls
        @timeupdate="onTimeUpdate"
        @play="playStart"
        @pause="playPause"
      ></video>
    </view> -->
    <view class="chapter-list">
      <view
        v-for="(item, index) in resourceList"
        :key="item.id"
        class="chapter-item"
        :class="{ chapterActive: item.id === activeItem.id }"
        @click="clickItem(item)"
      >
        <view>{{ `课时${index + 1}  ${item.periodName}` }}</view>
        <view class="progress-type">
          <view class="progress">{{ item.periodProgress || 0 }}%</view>
          <view class="video-text" v-if="item.resourceResp.resourceType === 1"
            >视频</view
          >
          <view class="file-text" v-if="item.resourceResp.resourceType === 3"
            >文档</view
          >
          <view class="picture-text" v-if="item.resourceResp.resourceType === 4"
            >图片</view
          >
        </view>
      </view>
      <van-empty v-if="!resourceList.length" description="暂无课时数据" />
    </view>
  </view>
</template>

<script>
import { GetStudyId, RecordStudyProgress } from "@/api/course/course.js";
export default {
  name: "ResourceList",
  data() {
    return {
      activeItem: {},
      activeUrl: "",
      resourceList: [],
      timer: null,
      currentTime: 0,
      videoContext: null,
      jumpTime: 0,
      recordObj: {},
      isPause: false,
    };
  },
  methods: {
    playStart() {
      if (this.jumpTime > 0) {
        this.isPause = false;
        this.videoContext.seek(this.jumpTime);
        if (this.recordObj.studyId) {
          this.recordVideoProgress();
        }
      }
      if (this.isPause) {
        if (this.recordObj.studyId) {
          this.recordVideoProgress();
        }
      }
    },
    // 暂停时记录进度
    playPause() {
      clearInterval(this.timer);
      this.timer = null;
      if (this.recordObj.studyId) {
        this.isPause = true;
        RecordStudyProgress({
          studyId: this.recordObj.studyId,
          currentDuration: this.currentTime,
          studyStatus: 1,
          currentPage: 1,
          resourceId: this.recordObj.resourceId,
        });
      }
    },
    onTimeUpdate(e) {
      this.currentTime = e.target.currentTime;
    },
    recordVideoProgress() {
      clearInterval(this.timer);
      this.timer = null;
      this.timer = setInterval(() => {
        if (this.currentTime > 0) {
          RecordStudyProgress({
            studyId: this.recordObj.studyId,
            currentDuration: this.currentTime,
            studyStatus: 1,
            currentPage: 1,
            resourceId: this.recordObj.resourceId,
          });
        }
      }, 3000);
    },
    clickItem(item) {
      const { resourceType, resourceUrl, id, videoLength } = item.resourceResp;
      // 视频资源
      this.activeItem = item;
      let url = resourceUrl;
      if (url.indexOf("http") < 0 && url.indexOf("https") < 0) {
        url = "https://" + resourceUrl;
      }
      if (resourceType === 1) {
        this.recordObj = {};
        this.currentTime = 0;
        this.activeUrl = url;
        this.jumpTime = videoLength * ((item.periodProgress || 0) / 100);
        if (this.jumpTime === 0) {
          this.videoContext.play();
        }
        // 学习进度记录
        const courseId = uni.getStorageSync("courseId");
        GetStudyId({
          courseId,
          periodId: item.id,
        }).then((studyRes) => {
          if (studyRes.code === 200) {
            this.recordObj = { studyId: studyRes.data.studyId, resourceId: id };
            this.recordVideoProgress();
          }
        });
      }
      // 文档资源
      if (resourceType === 3) {
        let fileType = "pdf";
        const urlArr = url.split(".");
        fileType = urlArr[urlArr.length - 1];
        uni.downloadFile({
          url,
          success: function (res) {
            uni.openDocument({
              filePath: res.tempFilePath,
              fileType,
              success: function (res) {
                console.log("打开文档成功", res);
                // uni.showToast({
                //   title: "打开文档成功",
                //   icon: "none",
                // });
              },
              fail: function (err) {
                console.log("打开文档失败", res);
                // uni.showToast({
                //   icon: "none",
                //   title: "打开失败",
                // });
              },
            });
          },
          fail: function (err) {
            // uni.showToast({
            //   icon: "none",
            //   title: "下载失败",
            // });
          },
        });
        // 学习进度记录
        const courseId = uni.getStorageSync("courseId");
        GetStudyId({
          courseId,
          periodId: item.id,
        }).then((studyRes) => {
          if (studyRes.code === 200) {
            RecordStudyProgress({
              studyId: studyRes.data.studyId,
              currentDuration: this.currentTime,
              studyStatus: 1,
              currentPage: 1,
              resourceId: id,
            });
          }
        });
      }
      // 图片资源
      if (resourceType === 4) {
        uni.previewImage({
          urls: [url],
        });
      }
    },
    // 获取章节素材
    // getChapterResource(chapterId) {
    //   QueryChapterMaterialByCourseId({
    //     chapterId,
    //   }).then((res) => {
    //     if (res.code === 200) {
    //       this.resourceList = res.data || [];
    //     }
    //   });
    // },
  },
  onShow() {
    this.videoContext = uni.createVideoContext("myVideo");
    this.resourceList = uni.getStorageSync("rourseList");
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style scoped>
.video-box {
  width: 100vw;
  height: 400rpx;
}
.video-container {
  height: 100%;
  width: 100%;
}
.chapter-list {
  margin-top: 32rpx;
  padding: 0 40rpx;
}
.chapter-item {
  display: flex;
  justify-content: space-between;
  padding: 28rpx 0;
  border-bottom: 1px solid #ebeef5;
  color: #606266;
  font-size: 28rpx;
}
.chapterActive {
  color: #409eff;
}
.video-text,
.file-text,
.picture-text {
  padding: 4rpx 6rpx;
  border-radius: 6rpx;
  color: #fff;
}
.video-text {
  background-color: rgba(64, 158, 255, 0.6);
}
.picture-text {
  background-color: rgba(103, 194, 58, 0.6);
}
.file-text {
  background-color: rgba(230, 162, 60, 0.6);
}
.progress-type {
  display: flex;
  align-items: center;
}
.progress-type .progress {
  margin-right: 18rpx;
  color: #ccc;
}
</style>